<template>
  <div class="box">
    <div class="bg"></div>
    <van-nav-bar
      id="van-bar"
      :title="title"
      :border="border"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #left>
        <img
          :style="{ width: widthPx, height: heightPx }"
          src="@/assets/iconPerfectInformation/nav_back@2x.png"
        />
      </template>
      <template #right>
        <div class="headright"><img src="@/assets/myicon/camera-white.png" alt="" srcset=""><span>发布</span></div>
      </template>
    </van-nav-bar>
    
    <van-list v-model="loading" :finished="finished" finished-text="— THE END —" @load="getData"
    class="glance"
    
      :style="
        'top:' +
        (topheight  )+
        'px;height:calc(100vh - ' +
        (topheight  )+
        'px);width:100%;overflow:auto;'
      "
    >
      <div class="glancelist">
        
        <div class="list" v-for="(item, index) in list" :key="index">
            <div class="del" @click="cz(item.id)">删除</div>
            <div class="title">{{item.content}}</div>
            <div class="time">{{item.timetitle}} | {{item.city_name}}</div>
            <div class="img">
                <img class="more"  v-for="(item1, index1) in item.images" :key="index1" v-if="item.images.length>1" :src="item1" alt="" srcset="">
                <img :src="item.images[0]" class="one" v-else alt="" srcset="">
            </div>
        </div>
        <!-- <p style="text-align: center;margin: 24px 0;color: #AAAAAA;font-size: 10px;"></p> -->
      </div>
    </van-list>
  </div>
</template>

<script>
import { getDongtai,delDongtai} from "@/api/index"
import { Toast } from 'vant'

export default {
  data() {
    return {
      border: "",
      widthPx: "28px",
      heightPx: "28px",
      topheight: 0,
      isActive: 0,
      isshow:true,
      title: "我的动态",
      isActive:0,
       loading: true,
      finished: false,
       searchParameter: {
        //  * 城市编码  为空为首页检索接口
        id:0,
        page: 1,
        limit: 10,
      },
      list: [
      
      ],
    };
  },
  mounted() {
    this.topheight = document.getElementById("van-bar").offsetHeight;
      this.getData()
    
  },

  methods: {
    onClickLeft() {
      this.$router.back();
    },
   onClickRight(){
    this.$router.push('/dynamic')
   },
    cz(id){
     
        delDongtai(id).then((res) => {
        // this.list=res.data.list
         Toast('删除成功')
        console.log(res);
      this.getData()

      })
      
    },
    getData(){
    
      const queryString = Object.keys(this.searchParameter)
        .map((key) => {
          if (this.searchParameter[key] && !!this.searchParameter[key]) {
            return `${encodeURIComponent(key)}=${encodeURIComponent(
              this.searchParameter[key]
            )}`
          }
        })
        .filter((res) => {
          return res
        })
        .join('&')
        getDongtai('0').then((res) => {
        // this.list=res.data.list
      const time = Math.round(new Date().getTime()/1000).toString();
        let list = []
         let time1=0
        res.data.list.forEach((el) => {
          time1=time-el.add_time
          if(time1<3600){
            el.timetitle=Math.round(time1/60)+'分钟前'
            // console.log(el.timetitle);
          }else if(time1<86400){
            el.timetitle=Math.round(time1/3600)+'小时前'
          }else {
            el.timetitle=Math.round(time1/86400)+'天前'
          }
         
        })
        this.list = list.concat(...res.data.list)
        console.log(this.list);
          // 加载状态结束
        this.loading = false
        this.finished = true
      })
    },
  },
};
</script>

<style scoped>
.active{
  position: relative;
margin: 8px auto 0 auto;
width: 194px;
display: flex;
height: 36px;
background: #E8EDFC;
border-radius: 8px;
}
.active div{
  flex: 1;
  text-align: center;
  line-height: 36px;
  font-size: 14px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #767676;
}
.isActive{
  width: 96px;
height: 32px;
background: #FFFFFF;
border-radius: 8px;
line-height: 32px !important;
margin: 2px;
color: #1A1A1A !important;

}
.setting{
  padding: 14px 16px;
  box-sizing: border-box;
  background: #E8EDFC;
  width: 343px;
height: 66px;
margin: 0 auto;
/* background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%); */
border-radius: 8px;
border: 1px solid rgba(82,117,241,0.3);
}
.glance{
  position:absolute;
}
.bg{
  width: 375px;
height: 88px;
position: absolute;
  top: 0;
background: linear-gradient(180deg, #CDE1FD 0%, rgba(255,255,255,0) 100%);
}
.glancelist {
  width: 345px;
  margin: 0 auto;
}

.time{
  margin-top: 10px;
  font-size: 12px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #767676;
}
.img{
    display: flex;
    flex-wrap: wrap;
    margin-top: 7px;
}
.img img{
  border-radius: 5px;
}
.list{
    padding-top: 16px;
    position: relative;
    
}
.headright{
    width: 66px;
height: 30px;
background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%);
border-radius: 8px;
}
.headright img{
  margin: 6px 2px ;
}
.headright span{
  line-height:32px;color: #FFFFFF;
  vertical-align: top;
}
.del{
    position: absolute;
    right: 10px;
    top: 16px;
width: 52px;
text-align: center;
line-height: 24px;
height: 24px;
border-radius: 8px;
border: 1px solid #767676;
font-size: 12px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #767676;
}
.more{
    width: 105px;
    height: 105px;
    margin: 0 6px 6px 0;
}
.one{
    width: 233px;
height: 321px;
border-radius: 4px;
}
.title{
    font-size: 16px;
    width: 280px;
    font-weight: 500;
    color: #1A1A1A;
}
.van-cell {
  background-color: transparent;
}
.van-cell::after {
  border-color: #d8d8d8;
}
.van-cell__value {
  color: #1a1a1a;
  font-weight: 500;
}
.btn{
    float: right;
    margin: 6px 0;
    text-align: center;
    width: 84px;
height: 28px;
border-radius: 8px;
line-height: 28px;
border: 1px solid #767676;
font-size: 12px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #767676;
}
</style>
